<template>
  <view>
    <view>
      <u-tabs
        ref="uTabs"
        :list="list"
        :current="current"
        active-color="#057748"
        @change="tabsChange"
        bg-color="#f6f6f6"
        :is-scroll="false"
      ></u-tabs>
    </view>
    <swiper :current="current" @change="changeSwiper">
      <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
        <scroll-view scroll-y style="width: 100%" @scrolltolower="onreachBottom">
          <view class="item" v-for="(item, index) in couponsList" :key="index">
            <image
              class="img"
              :src="item.state == 1 ? BaseUrl + '/static/common/quan1.png' : BaseUrl + '/static/common/quan2.png'"
              mode="scaleToFill"
            />
            <view class="info">
              <view class="top">
                <view class="left">
                  <view class="title"><text>￥</text>{{ item.price }}</view>
                  <view class="box">
                    <view class="date">{{ item.name }}</view>
                    <button class="btn_s btn" v-if="false">验券</button>
                    <button class="btn_s btn" v-if="item.state == 1" @click="useThis(item)">立即使用</button>
                    <button class="btn_d btn" v-if="item.state == 2">已使用</button>
                    <button class="btn_d btn" v-if="item.state == 3">已过期</button>
                  </view>
                </view>
              </view>
              <view class="bottom">有效期{{ item.enddate }}</view>
            </view>
          </view>
          <u-empty text="暂无数据" v-if="couponsList.length == 0" mode="list"></u-empty>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
  data() {
    return {
      BaseUrl: BaseUrl,
      list: [
        {
          id: 1,
          name: "待使用",
        },
        {
          id: 2,
          name: "已使用",
        },
        {
          id: 3,
          name: "已过期",
        },
      ],
      current: 0,
      couponsList: [],
    };
  },

  onShow() {
    this.getList();
  },

  methods: {
    getList() {
      this.$util.showLoading();
      uni.request({
        url: BaseUrl + "/api/wanlshop.coupon/getMyList?state=" + this.list[this.current].id,
        method: "POST",
        header: {
          token: uni.getStorageSync("token"),
        },
        success: (res) => {
          this.couponsList = res.data.data.data;
          this.$util.hideAll();
        },
      });
    },
    useThis(item) {
      this.$request.get("api/wanlshop.coupon/apply", { id: item.id }).then((res) => {
        if (item.type == "all") {
          uni.switchTab({ url: "/pages/tabBar/home/home" });
        } else if (item.type == "reduction") {
          uni.navigateTo({ url: "/dabai/pages/aShop/aShop?id=" + item.shop_id });
        } else if (item.type == "discount") {
          uni.navigateTo({ url: "/dabai/pages/aShop/aShop?id=" + item.shop_id });
        } else {
          uni.switchTab({ url: "/pages/tabBar/home/home" });
        }
        // uni.navigateTo({ url: '/liu/pages/apply?id=' + item.id + '&state=1' })
        // uni.showToast({
        //   title: res.msg,
        //   icon: "none",
        // });
      });
    },
    tabsChange(index) {
      this.current = index;
      this.getList();
    },
    changeSwiper(e) {
      this.current = e.detail.current;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
swiper {
  height: calc(100vh - 80rpx);
}
.swiper-item {
  overflow: auto;
}
.item {
  width: 90%;
  margin: 0rpx auto;
  height: 280rpx;
  position: relative;
  .img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .info {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 5% 0 14%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      .left {
        width: 100%;
        .title {
          font-size: 70rpx;
          font-weight: bold;
          text {
            font-size: 54rpx;
            font-weight: bold;
          }
        }
        .box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10rpx 0;
          .date {
            font-size: 28rpx;
            color: #888;
          }
          .btn {
            width: 180rpx;
            height: 66rpx;
            line-height: 66rpx;
            border-radius: 30rpx;
          }
          .btn_s {
            background: linear-gradient(90deg, #00a67a, #057748);
          }
          .btn_d {
            background: #858585;
          }
        }
      }
    }
    .bottom {
      padding-top: 20rpx;
      color: #989898;
    }
  }
}
</style>
